<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    #box {
        width: 300px;
        height: 300px;
        background: #F2B06C;
        border-radius: 50%;
        position: relative;
    }
    
    #smail1 {
        width: 200px;
        height: 200px;
        background: #666;
        position: absolute;
        top: 70px;
        left: 50px;
        border-radius: 50%;
    }
    
    #smail2 {
        width: 200px;
        height: 200px;
        background: #F2B06C;
        position: absolute;
        top: 65px;
        left: 50px;
        border-radius: 50%;
    }
    
    #smail1 .left {
        width: 50px;
        height: 50px;
        background: #EC783A;
        position: absolute;
        z-index: 300;
        border-radius: 50%;
        top: 65px;
        left: -15px;
    }
    
    #smail1 .right {
        width: 50px;
        height: 50px;
        background: #EC783A;
        position: absolute;
        z-index: 300;
        border-radius: 50%;
        top: 65px;
        right: -15px;
    }
    
    #smail1 .left .eye {
        width: 90px;
        height: 25px;
        background: #fff;
        position: absolute;
        top: -45px;
        border-radius: 25px;
        left: 5px;
    }
    
    #smail1 .right .eye {
        width: 90px;
        height: 25px;
        background: #fff;
        position: absolute;
        top: -45px;
        border-radius: 25px;
        right: 5px;
    }
    
    #smail1 .right .eye .orb {
        width: 25px;
        height: 25px;
        background: #323232;
        border-radius: 50%;
        position: absolute;
        left: 0px;
        animation: myfirst 3s infinite;
    }
    
/*
    @keyframes myfirst {
        0% {
            left: 0px;
        }
        50% {
            left: 50px;
        }
        100% {
            left: 0px;
        }
    }
*/
    
    @keyframes myfirst {
        0% {
            left: 0px;
        }
        50% {
            left: 65px;
        }
        100% {
            left: 0px;
        }
    }
    
    #smail1 .left .eye .orb {
        width: 25px;
        height: 25px;
        background: #323232;
        border-radius: 50%;
        position: absolute;
        left: 0px;
        animation: myfirst 3s infinite;
    }
    
    #smail1 .left .mei1 {
        width: 90px;
        height: 90px;
        border-top: 6px solid #333;
        border-radius: 50%;
        position: absolute;
        top: -120px;
        left: -47px;
        transform: rotate(30deg);
    }
    
    #smail1 .right .mei1 {
        width: 90px;
        height: 90px;
        border-top: 6px solid #333;
        border-radius: 50%;
        position: absolute;
        top: -120px;
        right: -47px;
        transform: rotate(-30deg);
    }
</style>

<body>
    <div id="box">
        <div id="smail1">
            <div class="left">
                <div class="eye">
                    <div class="orb"></div>
                </div>
                <div class="mei1"></div>
            </div>
            <div class="right">
                <div class="eye">
                    <div class="orb"></div>
                </div>
                <div class="mei1"></div>
            </div>
        </div>
        <div id="smail2"></div>
    </div>
</body>
</html>